<template>
	<div class="points-use app-main-content-box">
		<!-- 卡片组 -->
		<el-row :gutter="30">
			<!-- 积分抵扣现金 -->
			<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
				<el-card :body-style="{ padding: '0px' }" shadow="hover">
					<div class="img-container"><img src="../../../assets/icon/i-points-cash.png" class="image" /></div>
					<div style="padding: 10px;">
						<div class="title"><strong>积分抵扣现金</strong></div>
						<div class="tips">顾客线上或者到店消费时可以使用积分抵扣现金</div>
						<div class="status">
							<svg-icon icon-class="s-i-dot" :class="defaultForm.enablePoints && defaultForm.enableUsePoints ? 'app-text-color-success' : 'app-text-color-danger'" />
							<span>{{ defaultForm.enablePoints && defaultForm.enableUsePoints ? '已启用' : '未启用' }}</span>
						</div>
						<el-button type="primary" class="button" @click="openControl('cash')">管理</el-button>
					</div>
				</el-card>
			</el-col>

			<!--积分商城  -->
			<el-col
				v-if="
					!$store.getters.banBtnList.includes('BTN_ADD_POINTS_MALL_PRODUCT') ||
						!$store.getters.banBtnList.includes('BTN_CHANGE_POINTS_MALL_PRODUCT_STATUS') ||
						!$store.getters.banBtnList.includes('BTN_POINTS_MALL_PRODUCT_EDIT') ||
						!$store.getters.banBtnList.includes('TAB_POINTS_CONFIG')
				"
				:xs="24"
				:sm="12"
				:md="8"
				:lg="6"
				:xl="6"
			>
				<el-card :body-style="{ padding: '0px' }" shadow="hover">
					<div class="img-container"><img src="../../../assets/icon/i-points-mall.png" class="image" /></div>
					<div style="padding: 10px;">
						<div class="title"><strong>积分商城</strong></div>
						<div class="tips">上架优惠券或者商品给顾客兑换, 快速消耗顾客的积分</div>
						<div class="status">
							<svg-icon icon-class="s-i-dot" :class="defaultForm.enablePoints && enablePointsMall ? 'app-text-color-success' : 'app-text-color-danger'" />
							<span>{{ defaultForm.enablePoints && enablePointsMall ? '已启用' : '未启用' }}</span>
						</div>
						<el-button type="primary" class="button" @click="openControl('mall')">管理</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 弹框 -->
		<dialog-redeem-points-for-cash ref="redeemPoints" />
	</div>
</template>

<script>
import DialogRedeemPointsForCash from './DialogRedeemPointsForCash';
import { getPointsMallConfig } from '@/api/points';
export default {
	components: {
		DialogRedeemPointsForCash
	},
	props: {
		tabName: {
			type: String,
			require: true
		},
		form: {
			type: Object,
			require: true
		},
		defaultForm: {
			type: Object,
			require: true
		}
	},
	data() {
		return {
			option: this.$route.params,
			enablePointsMall: 0
		};
	},
	mounted() {
		let that = this;
		this.initPointsMallConfig();

		//超级会员-邀请者-编辑跳转过来，自动打开积分弹框
		if (this.option.changeType == 'spMbPoints') {
			setTimeout(function() {
				that.openControl('cash');
			}, 500);
		}
	},
	methods: {
		/**
		 * 获取数据
		 */
		// 获取积分商城开关
		initPointsMallConfig() {
			getPointsMallConfig()
				.then(res => {
					this.enablePointsMall = res.data.mallState;
				})
				.catch(err => {})
				.finally(() => {});
		},
		/**
		 * 按钮组
		 */
		// 打开积分抵扣现金
		openControl(type) {
			if (this.defaultForm.enablePoints) {
				switch (type) {
					// 消费奖励积分
					case 'cash':
						this.$refs.redeemPoints.open(this.form).then(res => {});
						break;
					// 消费奖励积分
					case 'mall':
						this.$router.push({
							name: 'VipPointsMall'
						});
						break;
				}
			} else {
				this.$alert('积分功能未启用，如果需要开启请前往基础设置中启用积分', '温馨提示', {
					confirmButtonText: '确定',
					type: 'warning',
					center: true,
					callback: action => {}
				});
			}
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.points-use {
	.el-card {
		margin-bottom: 20px;
	}
	/* 标题 */
	.title {
		font-size: 18px;
		text-align: center;
	}
	/* 图片 */
	.img-container {
		display: block;
		position: relative;
		margin: 10px 0;
		padding-bottom: 50%;
		img {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 50%;
			height: 100%;
		}
	}
	/* 说明 */
	.tips {
		min-height: 32px;
		margin: 10px 0;
		font-size: 14px;
		text-align: center;
		color: $light-font-color;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	/* 状态 */
	.status {
		margin-bottom: 10px;
		text-align: center;
		font-size: 14px;
	}
	/* 按钮 */
	.button {
		width: 100%;
	}
}
</style>
